<?php
include_once('config/config.php');

$LoginAdmin = auth();

$id = !empty($_GET['id']) ? $_GET['id'] : 0;

$Sql = "SELECT s.*,d.name AS dname FROM `stu_student` AS s LEFT JOIN `stu_department` AS d ON s.depid = d.id WHERE s.id = $id";

$Data = find($Sql);

?>

<!DOCTYPE html>
<html lang="en">

<head>
  <?php include_once('common/meta.php') ?>
</head>

<!--[if lt IE 7 ]> <body class="ie ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie ie7 "> <![endif]-->
<!--[if IE 8 ]> <body class="ie ie8 "> <![endif]-->
<!--[if IE 9 ]> <body class="ie ie9 "> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<style>
  input[type="file"] {
    display: none;
  }

  label[for="avatar"] {
    width: 200px;
  }
</style>

<body>
  <!--<![endif]-->

  <?php include_once('common/header.php') ?>

  <?php include_once('common/nav.php') ?>

  <div class="content">
    <div class="header">
      <h1 class="page-title">学生信息详情</h1>
    </div>
    <ul class="breadcrumb">
      <li><a href="index.php">Home</a> <span class="divider">/</span></li>
      <li><a href="personlist.php">StudentList</a> <span class="divider">/</span></li>
      <li class="active">StudentDetail</li>
    </ul>

    <div class="container-fluid">
      <div class="row-fluid">

        <div class="btn-toolbar">
          <button class="btn btn-primary" onClick="location='studentlist.php'"><i class="icon-list"></i>学生列表</button>
          <div class="btn-group">
          </div>
        </div>

        <div class="well">
          <div id="myTabContent" class="tab-content">
            <div class="tab-pane active in" id="home">
              <form method="post" enctype="multipart/form-data">

                <label>学生姓名</label>
                <input disabled type="text" name="name" value="<?php echo $Data['name'] ?>" class="input-xxlarge">

                <label>年龄</label>
                <input disabled type="number" name="age" value="<?php echo $Data['age'] ?>" class="input-xxlarge">
                <label>家长电话</label>
                <input disabled type="tel" name="parents_phone" value="<?php echo $Data['parents_phone'] ?>" class="input-xxlarge">

                <label>性别</label>
                <select disabled name="sex" class="input-xlarge">
                  <option value="1" <?php echo $Data['sex'] == 1 ? 'selected' : '' ?>>男</option>
                  <option value="2" <?php echo $Data['sex'] == 2 ? 'selected' : '' ?>>女</option>
                </select>

                <label>所属部门</label>
                <input disabled type="tel" name="parents_phone" value="<?php echo $Data['dname'] ?>" class="input-xxlarge">
                <label></label>
              </form>
            </div>
          </div>
        </div>

        <?php include_once('common/footer.php') ?>

      </div>
    </div>
  </div>
</body>

</html>
<?php include_once('common/script.php') ?>

<script>
  $('#avatar').change(function() {

    // 获取当前的文件
    var file = $(this)[0].files[0] ? $(this)[0].files[0] : {}

    // 返回对象地址
    var url = GetObjectURL(file)

    // 把图像更新
    $('#upload').attr('src', url)
  })


  // 选择省份 -> 市 区
  $('#province').change(function() {
    var code = $(this).val()

    $.post('region.php', {
      action: 'region',
      code: code
    }, function(res) {
      if (res.code === 1) {
        var option = ''

        for (var item of res.data) {
          option += `<option value="${item.code}">${item.name}</option>`
        }

        $('#city').html(option)

        var CityCode = res.data[0].code ? res.data[0].code : 0

        getRegionData('#district', CityCode)
      } else {
        $('#city').html('<option value="0">请选择</option>')
      }
    }, 'json')
  })

  // 选择市 -> 区
  $('#city').change(function() {
    var code = $(this).val()

    getRegionData('#district', code)
  })

  // 获取职位数据
  $('#depid').change(function() {
    var depid = $(this).val()

    $.post('personadd.php', {
      depid,
      action: 'job'
    }, function(res) {
      if (res.code === 1) {
        var option = ''

        for (var item of res.data) {
          option += `<option value="${item.id}">${item.name}</option>`
        }

        $('#jobid').html(option)
      }
    }, 'json')
  })

  function getRegionData(el, code, action = 'region') {
    $.ajax({
      type: 'post',
      url: 'region.php',
      data: {
        code,
        action
      },
      dataType: 'json',
      success: function(res) {
        if (res.code === 1) {
          var option = ""

          for (var item of res.data) {
            option += `<option value="${item.code}">${item.name}</option>`
          }

          $(el).html(option)
        } else {
          $(el).html('<option value="0">请选择</option>')
        }
      }
    })
  }
</script>
<style>
  form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 50px auto;
    padding: 20px;
    max-width: 800px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  }

  label {
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 16px;
    color: #444;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select {
    margin-bottom: 20px;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
  }

  select {
    width: 100%;
  }

  select option:first-child {
    color: #999;
  }

  select:disabled option {
    color: #444;
  }

  select:disabled {
    background-color: #f6f6f6;
  }

  input[type="submit"] {
    margin-top: 30px;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: #337ab7;
    border-radius: 5px;
    border: none;
    cursor: pointer;
  }

  input[type="submit"]:hover {
    background-color: #2e6da4;
  }

  img#upload {
    display: block;
    margin: 20px auto;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
  }

  img#upload:hover {
    opacity: 0.8;
  }

  select,
  input[type="file"] {
    height: 40px;
  }
</style>